<template>
  <div>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="showDialog"
      :width="dialogInfo.width"
      :bt-list="dialogInfo.btList"
    >
      <div class="model-panel">
        <div class="model-panel-body">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="表格显示设置" name="showLevel">
              <el-row class="set-preference-wrap">
                <el-col :span="6">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList1.length"
                    @click="rightMove('showLevel')"
                    >一键右移</el-button
                  >
                  <div class="set-preference-item margin-right">
                    <div class="draggable-wrap-item background-color">未选</div>
                    <draggable
                      class="draggable-wrap"
                      :list="fieldList1"
                      @add="fieldAddshow1"
                      tag="ul"
                      v-bind="{
                        animation: 200,
                        group: 'fieldSite',
                      }"
                    >
                      <template #item="{ element, index }">
                        <div
                          class="draggable-wrap-item"
                          :key="Math.random() + index"
                        >
                          {{ element.label }}
                        </div>
                      </template>
                    </draggable>
                  </div>
                </el-col>
                <el-col :span="17">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList2.length"
                    @click="leftMove('showLevel')"
                    >一键左移</el-button
                  >
                  <div class="set-preference-item">
                    <div class="draggable-wrap-item background-color">
                      <span>已选</span>
                      <div class="draggable-wrap-item-right">
                        <div class="draggable-wrap-item-right-form-width-title">
                          单元格宽度
                        </div>
                        <span class="slip-edit">操作</span>
                      </div>
                    </div>
                    <draggable
                      class="draggable-wrap"
                      v-model="fieldList2"
                      @add="fieldAddshow2"
                      @update="datadragFieldEnd2"
                      tag="ul"
                      v-bind="{
                        animation: 300,
                        group: 'fieldSite',
                      }"
                    >
                      <template #item="{ element, index }">
                        <div
                          class="draggable-wrap-item"
                          :key="Math.random() + index"
                        >
                          <span> {{ element.label }}</span>
                          <div class="draggable-wrap-item-right">
                            <el-input-number
                              style="width: 100px; margin-right: 10px"
                              clearable
                              controls-position="right"
                              v-model="element.minWidth"
                              :min="0"
                            ></el-input-number>
                            <span
                              class="slip-edit"
                              @click="setTop(element, fieldList2, 'showLevel')"
                            >
                              {{ index ? '置顶' : '' }}
                            </span>
                          </div>
                        </div>
                      </template>
                    </draggable>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane
              label="表格分组设置"
              v-if="groupLevelShow"
              name="groupLevel"
            >
              <el-row class="set-preference-wrap">
                <el-col :span="6">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList1.length"
                    @click="rightMove('groupLevel')"
                    >一键右移</el-button
                  >
                  <div class="set-preference-item margin-right">
                    <div class="draggable-wrap-item background-color">未选</div>
                    <draggable
                      class="draggable-wrap"
                      v-model="fieldList1"
                      tag="ul"
                      v-bind="{
                        animation: 200,
                        group: 'fieldSite',
                      }"
                      @add="fieldAddGroup1"
                    >
                      <template #item="{ element, index }">
                        <div
                          class="draggable-wrap-item"
                          :key="Math.random() + index"
                        >
                          {{ element.label }}
                        </div>
                      </template>
                    </draggable>
                  </div>
                </el-col>
                <el-col :span="17">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList2.length"
                    @click="leftMove('groupLevel')"
                    >一键左移</el-button
                  >
                  <div class="set-preference-item">
                    <div class="draggable-wrap-item background-color">
                      <span>已选</span>
                      <span style="marginright: 100px">操作</span>
                    </div>
                    <draggable
                      class="draggable-wrap"
                      v-model="fieldList2"
                      tag="ul"
                      v-bind="{
                        animation: 200,
                        group: 'fieldSite',
                      }"
                      @add="fieldAddGroup2"
                      @update="datadragFieldEnd3"
                    >
                      <template #item="{ element, index }">
                        <span> {{ element.label }}</span>
                        <span
                          style="marginright: 100px"
                          class="slip-edit"
                          @click="setTop(element, fieldList2, 'groupLevel')"
                        >
                          {{ index ? '置顶' : '' }}
                        </span>
                      </template>
                    </draggable>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane name="sortLevel">
              <template #label>
                <div style="display: flex">
                  <span class="margin-right">表格排序设置</span>
                </div>
              </template>
              <el-row class="set-preference-wrap">
                <el-col :span="6">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList1.length"
                    @click="rightMove('sortLevel')"
                    >一键右移</el-button
                  >
                  <div class="set-preference-item margin-right">
                    <div class="draggable-wrap-item background-color">未选</div>
                    <draggable
                      class="draggable-wrap"
                      v-model="fieldList1"
                      tag="ul"
                      v-bind="{
                        animation: 300,
                        group: 'fieldSite',
                      }"
                      @add="fieldAddSort1"
                    >
                      <template #item="{ element, index }">
                        <div
                          class="draggable-wrap-item"
                          :key="Math.random() + index"
                        >
                          {{ element.label }}
                        </div>
                      </template>
                    </draggable>
                  </div>
                </el-col>
                <el-col :span="17">
                  <el-button
                    style="marginbottom: 5px; marginleft: 5px"
                    :disabled="!fieldList2.length"
                    @click="leftMove('sortLevel')"
                    >一键左移</el-button
                  >
                  <div class="set-preference-item">
                    <div class="draggable-wrap-item background-color">
                      <span>已选</span>
                      <span style="marginright: 100px">操作</span>
                    </div>
                    <draggable
                      class="draggable-wrap"
                      v-model="fieldList2"
                      tag="ul"
                      v-bind="{
                        animation: 300,
                        group: 'fieldSite',
                      }"
                      @add="fieldAddSort2"
                      @update="datadragFieldEnd4"
                    >
                      <template #item="{ element, index }">
                        <div
                          class="draggable-wrap-item"
                          :key="Math.random() + index"
                        >
                          <span>{{ element.label }}</span>
                          <span
                            style="marginright: 100px"
                            class="slip-edit"
                            @click="
                              changeSort(element.sortControllerType, index)
                            "
                          >
                            {{
                              element.sortControllerType === 1
                                ? '升序'
                                : element.sortControllerType === 2
                                ? '降序'
                                : ''
                            }}
                          </span>
                        </div>
                      </template>
                    </draggable>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </page-dialog>
    <selectNoAuthUsers
      v-if="userInfo.visible"
      v-model:show-dialog="userInfo.visible"
      :query="userInfo.query"
      :api="userInfo.api"
      :saveEmpty="userInfo.saveEmpty"
      :checkedList="userInfo.checkedList"
      :check-box="true"
      :highlight-row="false"
      @callback="selectUserInfoBack"
    />
  </div>
</template>
<script setup name="ConsumeSetPreference">
import draggable from 'vuedraggable'
import selectNoAuthUsers from '../SelectUsers/selectNoAuthUsers'
import { getRrgUserList } from '@/api/base'
import { customizeUserShare } from '@/api/customize'
const emits = defineEmits()
const { proxy } = getCurrentInstance()
const PageDialog = defineAsyncComponent(() =>
  import('@/components/PageDialog/index')
)
const SelectModel = defineAsyncComponent(() =>
  import('@/components/SelectModel/index')
)
//偏好设置
const props = defineProps({
  visible: {
    type: Boolean,
  },
  searchList: {
    type: Array,
    default: function () {
      return []
    },
  },
  fieldList: {
    type: Array,
    default: function () {
      return []
    },
  },
  customizeUserVO: {
    type: Object,
    default: function () {
      return {}
    },
  },
  groupLevelShow: {
    type: Boolean,
    default: false,
  },
  tableKey: {
    type: String,
    default: '',
  },
})
const activeName = ref('showLevel')
const dialogInfo = ref({
  title: '偏好设置',
  width: '800px',
  btLoading: false,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    { label: '分享', event: handleShare, show: props.tableKey },
    {
      label: '保存',
      type: 'primary',
      disabled: false,
      event: save,
      show: true,
    },
  ],
})
const searchList1 = ref([])
const searchList2 = ref([])
const fieldList1 = ref([])
const fieldList2 = ref([])
const newFieldList = ref([])
const newCustomizeUserVO = ref({})
const userInfo = ref({
  //人员弹窗
  visible: false,
  saveEmpty: false,
  api: getRrgUserList,
  checkedList: [],
  query: {
    statusMult: 1,
  },
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

setData()
function setData() {
  newCustomizeUserVO.value = JSON.parse(JSON.stringify(props.customizeUserVO))
  newFieldList.value = proxy.$fn.deepClone(props.fieldList)
  if (newFieldList.value.length) {
    fieldList1.value = newFieldList.value.filter((item) => item.showLevel === 0)
    newFieldList.value.sort(compare('showLevel'))
    fieldList2.value = newFieldList.value.filter((item) => item.showLevel > 0)
  }
}
function setTop(row, arr, str) {
  //置顶
  arr = arr.filter((item) => item !== row)
  switch (str) {
    case 'queryLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.searchLevel = index + 1
      })
      searchList2.value = arr
      break
    case 'showLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.showLevel = index + 1
      })
      fieldList2.value = arr
      break
    case 'groupLevel':
      arr.unshift(row)
      arr.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList2.value = arr
      break
  }
}
function rightMove(str) {
  //右移
  switch (str) {
    case 'queryLevel':
      searchList2.value = searchList2.value.concat(searchList1.value)
      searchList2.value.forEach((item, index) => {
        item.show = true
        item.searchLevel = index + 1
      })
      searchList1.value = []
      break
    case 'showLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.hidden = false
        item.showLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'groupLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.groupLevel = index + 1
      })
      fieldList1.value = []
      break
    case 'sortLevel':
      fieldList2.value = fieldList2.value.concat(fieldList1.value)
      fieldList2.value.forEach((item, index) => {
        item.sortable = true
        item.sortControllerType = 1
        item.sortLevel = index + 1
      })
      fieldList1.value = []
      break
  }
}
function leftMove(str) {
  //左移
  switch (str) {
    case 'queryLevel':
      searchList1.value = searchList1.value.concat(searchList2.value)
      searchList1.value.forEach((item) => {
        item.show = false
        item.searchLevel = 0
      })
      searchList2.value = []
      break
    case 'showLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.hidden = true
        item.showLevel = 0
      })
      fieldList2.value = []
      break
    case 'groupLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.groupLevel = 0
      })
      fieldList2.value = []
      break
    case 'sortLevel':
      fieldList1.value = fieldList1.value.concat(fieldList2.value)
      fieldList1.value.forEach((item) => {
        item.sortable = false
        item.sortControllerType = 0
        item.sortLevel = 0
      })
      fieldList2.value = []
      break
  }
}
function handleClose() {
  showDialog.value = false
}
function handleShare() {
  userInfo.value.visible = true
}
function selectUserInfoBack(data) {
  userInfo.value.checkedList = []
  if (data && data.length) {
    let list = data.map((item) => item.id)
    userInfo.value.checkedList = list
    let params = {
      tableKey: props.tableKey,
      userIdList: list,
    }
    customizeUserShare(params).then((res) => {
      if (res && res.success) {
      }
    })
  }
}
function save() {
  let customizeUserVO = newCustomizeUserVO.value
  let searchList = searchList2.value.concat(searchList1.value)
  let fieldList = newFieldList.value
  searchList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].searchLevel = item.searchLevel
    }
  })
  fieldList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].showLevel = item.showLevel
      customizeUserVO.detail[item.value].sortControllerType =
        item.sortControllerType
      customizeUserVO.detail[item.value].sortLevel = item.sortLevel
      customizeUserVO.detail[item.value].formWidth = item.minWidth
    }
  })
  emits('callback', {
    searchList: searchList,
    fieldList: fieldList,
    customizeUserVO: customizeUserVO,
  })
  handleClose()
}
function compare(property) {
  return function (a, b) {
    return a[property] - b[property]
  }
}
function handleClick() {
  proxy.$nextTick(() => {
    let fieldList = newFieldList.value
    if (activeName.value === 'showLevel') {
      fieldList1.value = fieldList.filter((item) => item.showLevel === 0)
      fieldList.sort(compare('showLevel'))
      fieldList2.value = fieldList.filter((item) => item.showLevel > 0)
    } else if (activeName.value === 'sortLevel') {
      fieldList.sort(compare('showLevel'))
      fieldList1.value = fieldList.filter(
        (item) => item.sortControllerType === 0 && item.showLevel > 0
      )
      fieldList2.value = fieldList.filter(
        (item) => item.sortControllerType > 0 && item.showLevel > 0
      )
    } else if (activeName.value === 'groupLevel') {
      fieldList1.value = fieldList.filter(
        (item) => item.groupLevel === 0 && item.showLevel > 0
      )
      fieldList2.value = fieldList.filter(
        (item) => item.groupLevel > 0 && item.showLevel > 0
      )
    }
  })
}
function changeSort(num, index) {
  if (num === 1) {
    fieldList2.value[index].sortControllerType = 2
  } else if (num === 2) {
    fieldList2.value[index].sortControllerType = 1
  }
}
//查询
function add1(e) {
  searchList1.value.forEach((item) => {
    item.show = false
    item.searchLevel = 0
  })
}
function add2(e) {
  searchList2.value.forEach((item, index) => {
    item.show = true
    item.searchLevel = index + 1
  })
}
function datadragSearchEnd2() {
  searchList2.value.forEach((item, index) => {
    item.searchLevel = index + 1
  })
}
//显示
function fieldAddshow1() {
  fieldList1.value.forEach((item) => {
    item.hidden = true
    item.showLevel = 0
  })
}
function fieldAddshow2() {
  fieldList2.value.forEach((item, index) => {
    item.hidden = false
    item.showLevel = index + 1
  })
}
function datadragFieldEnd2() {
  fieldList2.value.forEach((item, index) => {
    item.showLevel = index + 1
  })
}
//分组
function fieldAddGroup1() {
  fieldList1.value.forEach((item) => {
    item.groupLevel = 0
  })
}
function fieldAddGroup2() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
function datadragFieldEnd3() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1
  })
}
//排序
function fieldAddSort1(e) {
  fieldList1.value.forEach((item) => {
    item.sortable = false
    item.sortControllerType = 0
    item.sortLevel = 0
  })
}
function fieldAddSort2(e) {
  let newIndex = e.newIndex
  fieldList2.value.forEach((item, index) => {
    item.sortable = true
    item.sortControllerType = newIndex === index ? 1 : item.sortControllerType
    item.sortLevel = index + 1
  })
  console.log(fieldList2.value)
}
function datadragFieldEnd4(e) {
  fieldList2.value.forEach((item, index) => {
    item.sortLevel = index + 1
  })
}
function choose1(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
function choose2(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight
  let container = evt.path[1]
  let index = evt.oldIndex

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    })
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    })
  }
}
</script>
<style scoped lang="scss">
.set-preference-wrap {
  padding: 5px 0;
  box-sizing: border-box;
  .set-preference-item {
    border: 1px solid #dae2ea;
    height: 300px;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.draggable-wrap {
  height: 100%;
  .draggable-wrap-group {
    height: 100%;
    width: 100%;
    display: inline-block;
  }
}
.draggable-wrap-item {
  height: 36px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dae2ea;
  padding: 0 5px;
  box-sizing: border-box;
  color: #606266;
  .draggable-wrap-item-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .draggable-wrap-item-right-form-width {
      margin-right: 10px;
    }
    .draggable-wrap-item-right-form-width-title {
      width: 100px;
      margin-right: 10px;
      text-align: center;
    }
  }
}
.background-color {
  background: #dfdfdf;
  border-top: 0;
  color: #909399;
  font-weight: 600;
}
.margin-right {
  margin-right: 10px;
}
.slip-edit {
  display: inline-block;
  width: 40px;
}
</style>
